<template>
	<view class="box padding-20 bg-f7">
		<view>
			<u-form :model="info" ref="uForm" :labelWidth="80">
				<view class="bg-white border-radio-14 padding-l-r-20">
					<u-form-item label="姓名" prop="info.name">
						<view class="border">
							<u-input v-model="info.name" border="none" placeholder="请填写姓名"></u-input>
						</view>
					</u-form-item>
					<u-form-item label="手机号" prop="info.mobile">
						<view class="border">
							<u-input type="tel" v-model="info.mobile" border="none" placeholder="请填写手机号"></u-input>
						</view>
					</u-form-item>
					<u-form-item label="所在地区" prop="info.area" @click="showPicker = true">

						<view class="border">
							<u-input v-model="info.area" border="none" placeholder="请选择您所在的省市区" readonly
								suffixIcon="arrow-right" suffixIconStyle="color: #909399"></u-input>
						</view>
					</u-form-item>
					<u-form-item label="详细地址" prop="info.address">
						<view>
							<u-input v-model="info.address" border="none" placeholder="请输入详细地址"></u-input>
						</view>
					</u-form-item>
				</view>

				<view class="margin-t-20 bg-white border-radio-14 padding-l-r-20">
					<u-form-item label="设为默认" prop="info.is_default">
						<view class="flex-box ">
							<view class="flex-1"></view>
							<u-switch v-model="info.is_default" size="20" activeColor="#43ABC4"></u-switch>
						</view>

					</u-form-item>
				</view>

			</u-form>

			<view class="form-wrap">
				<u-button type="primary" shape="circle" text="保存" @click="handleSubmit"></u-button>
				<u-button type="primary" class="margin-t-20 del color-43" shape="circle" text="删除" v-show="id"
					@click="delSubmit"></u-button>
			</view>
		</view>
		<wmCityselect v-model="showPicker" @city-change="handleCityChange"></wmCityselect>
	</view>
</template>

<script>
	import {
		addAddrss,
		areaList,
		delAddress,
		detailAddress,
        editAddress
	} from '@/api/addrss'
	import wmCityselect from '@/components/address/components/address/lib/cityselect.vue'
	export default {

		components: {
			wmCityselect
		},
		data() {
			return {
				info: {
					name: '',
					mobile: '',
					area: '',
					address: '',
					is_default: false
				},
				showPicker: false,
				id: ''
			}
		},
		onLoad(e) {
			let list = []

			if (e.id) {
				this.id = e.id
				uni.setNavigationBarTitle({
					title: '编辑收货地址'
				})
				this.getInfo()
			} else {
				uni.setNavigationBarTitle({
					title: '新增地址'
				})
				this.id = ''
				this.info = {
					name: '',
					mobile: '',
					area: '',
					address: '',
					is_default: false
				}
			}
		},
		onShow() {
			this.getProvinceList()
		},
		methods: {
			getProvinceList() {
				areaList().then(res => {
					this.provinceList = res.data
				})
			},
			getInfo() {
				detailAddress({
					address_id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
						this.info.is_default = res.data.is_default == 1
					}
				})
			},
			handleCityChange(e) {
				this.info.area = e.province.label + ' ' + e.city.label + ' ' + e.area.label;
				// this.info.province = e.province.label
				// this.info.city = e.city.label
				// this.info.district = e.district.label
			},
			delSubmit() {
				let that = this
				uni.showModal({
					title: '提示',
					showCancel: true,
					content: "确定删除此地址？",
					confirmText: '删除',
					success: (res) => {
						if (res.confirm) {
							delAddress({
								address_id: that.id
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
									uni.navigateBack()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			handleSubmit() {
				if (!this.info.name) {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none'
					})
					return
				}
				if (!this.info.mobile) {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					return;
				}
				if (!this.info.area) {
					uni.showToast({
						title: '请选择地区',
						icon: 'none'
					})
					return;
				}
				if (!this.info.address) {
					uni.showToast({
						title: '请填写详细地址',
						icon: 'none'
					})
					return;
				}
				let info = {
					...this.info
				}
				info.is_default = Number(this.info.is_default)
				if (this.id){
                    info.address_id = this.id
                    this.editAddress( info)
                }else  {
                    this.addAddrss( info)
                }
			},
            addAddrss(info){
                addAddrss(info).then(res => {
                    if (res.code == 1) {
                        uni.showToast({
                            title: '新建地址成功',
                            icon: 'none'
                        })
                        uni.navigateBack()
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                    }
                })
            },
            editAddress(info){
                editAddress(info).then(res => {
                    if (res.code == 1) {
                        uni.showToast({
                            title: '修改地址成功',
                            icon: 'none'
                        })
                        uni.navigateBack()
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                    }
                })
            }
		}
	}
</script>

<style scoped lang="scss">
	.flex-box {
		width: 100%;
	}

	.border {
		position: relative;
		width: 100%;

		//border-bottom: 1px solid #DBDBDB;
		&::after {
			position: absolute;
			content: '';
			left: 0;
			bottom: -20rpx;
			height: 1px;
			width: 100%;
			background-color: #DBDBDB;
		}

	}

	.form-wrap {
		margin-top: 120rpx;

		button {
			height: 90rpx;
			background-color: #43ABC4;
			border-radius: 14rpx;

			&.del {
				border: 1px solid #43ABC4;
				background-color: transparent;
				color: #43ABC4;
			}
		}
	}
</style>